<template>
  <el-table stripe :show-header="false" :data="tableData" :show-overflow-tooltip="true" class="alarmTable">
    <el-table-column type="index" width="134" align="center" label="序号">
      <template #default="scope">
        <span class="text">{{ scope.$index + 1 + (currentPage - 1) * pageSize }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="名称" align="left">
      <template #default="scope">
        <span class="name-text">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="money" label="金钱" align="center" />
  </el-table>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs, nextTick, onUnmounted } from "vue";

export default defineComponent({
  name: "rank",
  setup() {
    // 表格的数据类型
    interface tableType {
      name: string;
      money: number;
    }
    const data = reactive({
      tableData: [] as Array<tableType>, // 表格的数据
      currentPage: 1, // 当前展示的页码
      pageSize: 6, // 当前表格一页展示多少条数据
      tableDom: {} as HTMLElement // 表格内容的dom
    });
    let timeInterval: any; // 定时器的对象
    let tableScroll = ref(true); // 是否需要滚动

    onMounted(() => {
      // 初始化表格的数据
      list();
      scrollTable();
    });

    onUnmounted(() => {
      clearInterval(timeInterval);
    });

    // 初始化表格的数据
    const list = () => {
      let arr: Array<tableType> = [];
      for (let i = 0; i < 28; i++) {
        let randomData = Math.floor(Math.random() * 100);
        let obj = {
          name: "名称" + randomData,
          money: randomData
        };
        arr.push(obj);
      }
      data.tableData = arr;
    };

    // 表格的数据滚动
    const scrollTable = () => {
      nextTick(() => {
        // 获取当前表格内容的dom
        let table = document.getElementsByClassName("alarmTable")[0];
        data.tableDom = table.getElementsByClassName("el-scrollbar__wrap")[0] as HTMLElement;
        // 鼠标放在表格内容，暂停滚动
        data.tableDom.addEventListener("mouseover", () => {
          tableScroll.value = false;
        });
        // 鼠标移出表格内容，继续滚动
        data.tableDom.addEventListener("mouseout", () => {
          tableScroll.value = true;
        });
        //
        timeInterval = setInterval(() => {
          if (tableScroll.value) {
            // 每次内容滚动的距离
            data.tableDom.scrollTop += 0.5;
            if (data.tableDom.clientHeight + data.tableDom.scrollTop == data.tableDom.scrollHeight) {
              data.tableDom.scrollTop = 0;
            }
          }
        }, 10);
      });
    };

    return {
      ...toRefs(data)
    };
  }
});
</script>
<style lang="scss" scoped>
.alarmTable {
  height: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
}
</style>
<style lang="scss" scoped>
.el-table,
.el-table::before,
.el-table--border .el-table__inner-wrapper::after,
.el-table--border::after,
.el-table--border::before,
.el-table__inner-wrapper::before {
  background: transparent !important;
}
// 上下间距
.el-table__body {
  margin-top: -10px;
  border-spacing: 0 10px;
}
.el-table th,
.el-table__cell > .cell {
  height: 109px;
  padding: 0;
  font-size: 28px;
  font-weight: 400;
  color: #ffffff;
  line-height: 109px !important;
}
.el-table thead {
  font-size: 28px;
  font-weight: 600;
  color: #fff !important;
}
.el-table tr {
  background: rgba(255,61,158,0.28);
  box-shadow: inset 2px 6px 36px 0px rgba(255,61,146,0.4), inset -2px -6px 36px 0px rgba(255,61,158,0.4);
  border-radius: 12px 12px 12px 12px;
  // background: rgba(49, 250, 233, 0.1) !important;
  // 斑马纹
  // &:nth-child(2n) {
  //   background: rgba(49, 250, 233, 0.1) !important;
  // }
}
.el-table th.el-table__cell {
  height: 109px;
  padding: 0;
  background: rgba(237, 250, 49, 0.1) !important;
}
.el-table tr:hover > td {
  cursor: pointer;
  background-color: transparent !important;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
// 隐藏滚动条
.el-scrollbar__bar {
  display: none;
}
</style>
